 <template>
  <div>
    <el-dialog width="70%" @close="handleClose(false)" @open="handleOpen" close-on-press-escape v-dialogDrag
      :title="'添加'" :close-on-click-modal="false" :lock-scroll="false" :visible="showDialog" v-if="showDialog">
      <el-tabs v-model="activeName" :tab-position="tabPosition" class="tabHight">
        <el-tab-pane name="first" label="新建应用">
          <div class="flex-x flex-center">
            <img style="width: 220px; height: 220px; margin-right: 30px" src="@/assets/images/yingyong_6.png" alt="" />
            <el-form :model="deviceGroupForm" :rules="deviceGroupRules" ref="deviceGroupForm" size="mini"
              label-width="90px" class="tabHight_auto">
              <el-row :gutter="20">
                <el-col :span="24" :offset="0">
                  <el-form-item label="应用名称:" prop="projectname">
                    <el-input v-model="deviceGroupForm.projectname" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24" :offset="0">
                  <el-form-item label="主题:" prop="themeuuid">
                    <el-select v-model="deviceGroupForm.themeuuid" placeholder="请选择" class="w100">
                      <el-option v-for="item in themeList" :key="item.value" :label="item.text" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="24" :offset="0">
                  <el-form-item label="应用描述:" prop="remarks">
                    <el-input
                      type="textarea"
                      v-model="deviceGroupForm.remarks"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col> -->
                <el-col :span="24" :offset="0">
                  <el-form-item label="基础服务页:" prop="basicsOpen">
                    <el-switch v-model="deviceGroupForm.basicsOpen">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane name="second" label="应用模板" prop="metadata">
          <AppTemplate @jcreateProductionProject="jcreateProductionProject" :productionList="productionList">
          </AppTemplate>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" v-if="activeName == 'first'">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
        <el-button v-if="isedit" :loading="btnLoading" size="mini" type="primary" key="1"
          @click="submitForm('deviceGroupForm')">确 定</el-button>
        <el-button :loading="btnLoading" key="2" v-else size="mini" type="primary"
          @click="submitForm('deviceGroupForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { setAssetsType, putAssetsType } from "@/api/assets";
import { uuid } from "@/utils";
import {
  jiemaAddProjectV2,
  jiemaCreateProductionProject,
  jiemaAddProjectV2Add,jiemaByTemplate
} from "@/api/jiema";
import AppTemplate from "./AppTemplate.vue";
// var axios = require('axios');
export default {
  props: {
    // showDeviceAdd: {
    //   type: Boolean,
    //   default: false,
    // },
    token: {
      type: String,
      default: "",
    },
    isedit: {
      type: Boolean,
      default: false,
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
    editmetaData: {
      type: Object,
      default: () => { },
    },
    themeList: {
      type: Array,
      default: () => [],
    },
    productionList: {
      type: Array,
      default: () => [],
    },
  },
  components: { AppTemplate },

  data() {
    return {
      activeName: "first",
      btnLoading: false,

      // showDialog: false,
      tabPosition: "left",
      deviceGroupForm: {
        projectname: "", //应用名
        themeuuid: "", //主题
        remarks: "", //备注 generateId
        basicsOpen: false, //基础服务页
        file: "",
      },
      tepBtnLoading:false,
      deviceGroupRules: {
        projectname: [
          { required: true, message: "请输入应用名称", trigger: "blur" },
        ],
      },
    };
  },
  mounted() { },
  computed: {},
  watch: {
    // showDeviceAdd(newValue, oldValue) {
    //   // this.showDialog = newValue;
    //   // this.activeName = "first";
    //   // this.newRoles = "";
    // },
  },
  methods: {
    jcreateProductionProject(item) {
      if(this.tepBtnLoading){
        return
      }
      this.tepBtnLoading  = true
      jiemaCreateProductionProject({ id: item.id }).then(async (res) => {
       try {
         await jiemaByTemplate({
          name: item.name,
        });
        this.tepBtnLoading = false
        this.$msg({
          type: "success",
          message: "操作成功!",
        });
        // this.showDialog = false;
        this.$emit("update:showDialog", false);
        this.handleClose(true);
       } catch (error) {
         this.tepBtnLoading = false
       }
      }).finally(f=>{
         this.tepBtnLoading = false
      })
    },
    //弹窗打开执行操作
    handleOpen() {
      this.activeName = "first";
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh, token) {
      this.$emit("closeDialog", isRefresh, token);
      this.cancelEmpty();
    },
    //取消清空数据
    cancelEmpty() {
      // this.showDialog = false;
      this.$emit("update:showDialog", false);
      this.deviceGroupForm = {
        projectname: "", //应用名
        themeuuid: "", //主题
        remarks: "", //备注
        basicsOpen: false, //基础服务页
        file: "",
      };
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const remarks = uuid(16);
          this.btnLoading = true;
          try {

            await jiemaAddProjectV2({
              ...this.deviceGroupForm,
              basicsOpen: this.deviceGroupForm.basicsOpen ? 1 : 0,
              remarks,
            });
            await jiemaAddProjectV2Add({
              id: remarks,
            });
            this.btnLoading = false;
            this.$msg({
              type: "success",
              message: "操作成功!",
            });
            this.$emit("update:showDialog", false);
            this.handleClose(true);
          } catch (error) {
            this.btnLoading = false;
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.addbutton {
  background-color: #2680d2;
  color: #ffffff;
  position: absolute;
  right: 0px;
  top: 0px;
}

.el-icon-plus {
  color: #ffffff;
}

.div-inline {
  display: inline;
  background-color: #e4e4e4;
  padding: 2px;
  border: 1px #5a5e66 solid;
  line-height: 25px;
  white-space: nowrap;
  word-wrap: break-word;
}

.imageHome {
  padding: 5px 5px 5px 5px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;

  .image-size {
    width: 94px;
    height: 94px;
    /*background: #2E2E2E;*/
    border-radius: 50%;
    opacity: 1;
    display: flex;
  }
}
</style>
